import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:marquee/marquee.dart';

class FloatScreenTrackView extends StatefulWidget {
  const FloatScreenTrackView({super.key});

  @override
  State<FloatScreenTrackView> createState() => _FloatScreenTrackViewState();
}

class _FloatScreenTrackViewState extends State<FloatScreenTrackView> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.centerLeft,
      children: [
        // 背景
        Image.asset(
          height: 46,
          width: 375,
          "assets/images/float_screen_liwu_bg_image.png",
        ),

        // 文字
        Padding(
          padding: EdgeInsets.only(left: 64),
          child: SizedBox(
            width: 260,
            height: 15,
            child: Marquee(
              startAfter: const Duration(microseconds: 350),
              onDone: () => {},
              text: "【 username 】won N-fold coins by sending【幸运礼物英语名】",
              style: TextStyle(color: Colors.white, fontSize: 12),
            ),
          ),
        ),

        // 头像 & 头像框
        Positioned(
          left: 20,
          child: Stack(
            alignment: Alignment.center,
            children: [
              // 头像
              CachedNetworkImage(
                imageUrl:
                    "https://www.tanchat.live/esoo-gift/8ec97693570df8f0fe4d90e3b79f2a78.png",
                placeholder: (context, url) => CircularProgressIndicator(),
                errorWidget: (context, url, error) => Icon(Icons.error),
                width: 30,
                height: 30,
              ),

              // 头像框
              Image.asset(
                "assets/images/ark_notice_info_track_liwu_avatar_cover_image.png",
                width: 48,
                height: 48,
              ),
            ],
          ),
        ),

        // 礼物按钮
        Positioned(
          right: 20,
          width: 40,
          height: 40,
          child: Image.asset(
            "assets/images/ark_notice_info_track_liwu_image.png",
          ),
        ),
      ],
    );
  }
}
